<!DOCTYPE html>
<html>
  <!--
    Copyright 2011 Google Inc.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
  -->
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Android Asset Studio - Device Frame Generator</title>

    <link rel="stylesheet" href="lib/cssreset-3.4.1.min.css">
    <link rel="stylesheet" href="lib/jquery-ui/css/android/jquery-ui-1.8.16.custom.css">
    <link rel="stylesheet" href="css/studio.css">

    <script src="lib/jquery-ui/js/jquery-1.6.2.min.js"></script>
    <script src="lib/jquery-ui/js/jquery-ui-1.8.16.custom.min.js"></script>

    <script src="js/asset-studio.pack.js"></script>

    <style>
      #main-container {
        width: 1000px;
      }

      #inout-container {
        width: 100%;
        display: box;
        box-orient: horizontal;
        box-pack: justify;
        box-align: justify;

        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: justify;
        -webkit-box-align: justify;

        display: -moz-box;
        -moz-box-orient: horizontal;
        -moz-box-pack: justify;
        -moz-box-align: justify;
      }

      #inputs {
                box-flex: 1;
        -webkit-box-flex: 1;
           -moz-box-flex: 1;
      }

      #device-list li {
        display: inline-block;
        vertical-align: top;
        background: #eee;
        padding: 8px;
        margin: 0 16px 16px 0;
        text-align: center;
        border: 1px dashed rgba(0,0,0,0.4);
      }

      #device-list li img {
        opacity: 0.5;
      }

      #device-list li.drag-hover {
        background: #fff;
        box-shadow: 0 0 40px #a4c639;
      }

      #device-list li.drag-hover img {
        opacity: 1;
      }

      #outputs {
        width: 400px;
      }

      #outputs img {
        width: 400px;
      }
    </style>

    <!-- TODO: remove Analytics tracking if you're building the tools locally! -->
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-18671401-1']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </head>
  <body>
    <div id="main-container">
      <div id="header">
        <h1><a href="index.html">Android Asset Studio</a></h1>
      </div>
      <div id="page-header">
        <div id="breadcrumb">
          <a href="index.html">Android Asset Studio</a> &raquo;
          <a href="index.html#group-device-frames">Device frame generators</a> &raquo;
          <em>Device frame generator</em>
        </div>
        <p id="page-intro">
          The <strong>Device frame generator</strong> allows you to quickly wrap your app
          screenshots in real device artwork, providing better context for your screenshots.
        </p>
      </div>
      <div id="inout-container">
        <div id="inputs">
          <h3>1. Choose a device:  <small style="font-weight:normal">(Drag a screenshot from your desktop onto a device.)</small></h3>
          <p></p>
          <ul id="device-list"></ul>
          <p><strong>Attention, Device Manufacturers! </strong> To get your device(s) listed here,
            please <a href="http://code.google.com/p/android-ui-utils/issues/entry?template=Feature%20request">
            file a feature request</a>, and include hi-res, transparent or on-white photos of your device.</p>
        </div>
        <div id="outputs">
          <h3>2. Save your output <small style="font-weight:normal">(Drag out to your desktop to save.)</small></h3>
          <div id="output">No input image.</div>
        </div>
      </div>
      <div id="footer">
        <p>See the source at the <a href="http://code.google.com/p/android-ui-utils">android-ui-utils</a> Google Code project.</p>
        <p>All generated art is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>. <a href="attribution.html">Attribution info</a></p>
      </div>
    </div>

    <script>
      $(studio.checkBrowser);
      $.event.props.push("dataTransfer");

      var DEVICES = [
        {
          id: 'nexus_one',
          title: 'Nexus One',
          url: 'http://www.google.com/phone/detail/nexus-one',
          landRes: ['back'],
          landOffset: [200,130],
          portRes: ['back'],
          portOffset: [141,191],
          portSize: [480,800],
        },
        {
          id: 'nexus_s',
          title: 'Nexus S',
          url: 'http://www.google.com/phone/detail/nexus-s',
          landRes: ['back', 'fore'],
          landOffset: [247,135],
          portRes: ['back', 'fore'],
          portOffset: [134,247],
          portSize: [480,800],
        },
        {
          id: 'galaxy_nexus',
          title: 'Galaxy Nexus',
          landRes: ['back', 'fore'],
          landOffset: [371,199],
          portRes: ['back', 'fore'],
          portOffset: [216,353],
          portSize: [720,1280],
        },
        {
          id: 'xoom',
          title: 'Motorola XOOM',
          url: 'http://www.google.com/phone/detail/motorola-xoom',
          landRes: ['back'],
          landOffset: [218,191],
          portRes: ['back'],
          portOffset: [199,200],
          portSize: [800,1280],
        }
      ];

      function getDeviceById(id) {
        for (var i = 0; i < DEVICES.length; i++) {
          if (DEVICES[i].id == id)
            return DEVICES[i];
        }
        return;
      }

      $.each(DEVICES, function() {
        $('<li>')
            .append($('<img>')
                .attr('src', 'res/device-frames/' + this.id + '/thumb.png'))
            .append($('<div>')
                .html('<strong>' +
                  (this.url ? 
                      ('<a href="' + this.url + '">' + this.title + '</a>') :
                      this.title) +
                  '</strong><br>' + this.portSize[0] + 'x' + this.portSize[1]))
            .data('deviceId', this.id)
            .appendTo('#device-list');
      });

      $('#device-list li')
          .live('dragover', function(evt) {
            $(this).addClass('drag-hover');
            evt.dataTransfer.dropEffect = 'link';
            evt.preventDefault();
          })
          .live('dragleave', function(evt) {
            $(this).removeClass('drag-hover');
          })
          .live('drop', function(evt) {
            $('#output').empty().text('Loading...');
            $(this).removeClass('drag-hover');
            var device = getDeviceById($(this).closest('li').data('deviceId'));
            evt.preventDefault();
            studio.forms.ImageField.loadImageFromFileList(evt.dataTransfer.files, function(data) {
              if (data == null) {
                $('#output').text('Invalid input image.');
                return;
              }
              imagelib.loadFromUri(data.uri, function(img) {
                createFrame(device, img);
              });
            });
          });

      function createFrame(device, screenshot) {
        var port;
        if (screenshot.naturalWidth  == device.portSize[0] &&
            screenshot.naturalHeight == device.portSize[1]) {
          if (!device.portRes) {
            alert('We don\'t have a portrait frame for this device yet.');
            $('#output').text('No input image.');
            return;
          }
          port = true;
        } else if (screenshot.naturalWidth  == device.portSize[1] &&
                   screenshot.naturalHeight == device.portSize[0]) {
          if (!device.landRes) {
            alert('We don\'t have a landscape frame for this device yet.');
            $('#output').text('No input image.');
            return;
          }
          port = false;
        } else {
          alert('The screenshot must be ' +
              device.portSize[0] + 'x' + device.portSize[1] +
              ' or ' +
              device.portSize[1] + 'x' + device.portSize[0]);
          $('#output').text('Invalid input image.');
          return;
        }

        // Load image resources
        var res = port ? device.portRes : device.landRes;
        var resList = {};
        for (var i = 0; i < res.length; i++) {
          resList[res[i]] = 'res/device-frames/' + device.id + '/' +
              (port ? 'port_' : 'land_') + res[i] + '.png'
        }

        var resourceImages = {};
        imagelib.loadImageResources(resList, function(r) {
          resourceImages = r;
          continuation_();
        });

        function continuation_() {
          var width = resourceImages['back'].naturalWidth;
          var height = resourceImages['back'].naturalHeight;
          var offset = port ? device.portOffset : device.landOffset;

          var canvas = document.createElement('canvas');
          canvas.width = width;
          canvas.height = height;

          var ctx = canvas.getContext('2d');
          ctx.drawImage(resourceImages['back'], 0, 0);
          ctx.drawImage(screenshot, offset[0], offset[1]);
          if (resourceImages['fore']) {
            ctx.drawImage(resourceImages['fore'], 0, 0);
          }

          $('<img>')
              .attr('src', canvas.toDataURL())
              .appendTo($('#output').empty());
        }
      }
    </script>
  </body>
</html>
